<template>
<!-- 个人中心 -->
  <div id="personal">
    <el-card class="personal-card">
      <div class="head">
        <el-image :src="url" fit="cover"></el-image>
      </div>
      <p class="user">{{userName}}</p>
      <p class="role">{{role}}</p>
    </el-card>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { getInfo } from '@/api/user'
import { mapGetters } from 'vuex'

export default {
  name: 'personal',
  props: {
    user: {
      type: String,
      default: '用户名'
    },
    roles: {
      type: String,
      default: '普通用户'
    },
    urls: {
      type: String,
      default: require('@/assets/user.png')
    }
  },
  data() {
    return {
      userName: this.user,
      role: this.roles,
      url: this.urls
    }
  },
  computed: {
    ...mapGetters([
      'todoNews'
    ]),
  },
  created() {
    this.getInfo()
    this.$store.commit('user/SET_TODONEWS', 0)
  },
  methods: {
    // 获取用户信息
    getInfo() {
      getInfo(getToken()).then((response) => {
        this.userName = response.data.displayName
        this.url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }).catch(error => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#personal {
  width: 100%;
  min-height: calc(100vh - 1.5rem);
  background: #fff;
  // position: fixed;
  // top: 0.9rem;
  // bottom: 0.1rem;
  // right: 0.1rem;
  // left: 2.2rem;
  // overflow: hidden;
  // overflow-y: auto;
  .personal-card {
    width: 4rem;
    height: 6rem;
    display: inline-block;
    margin: 0.5rem 0.2rem;
    text-align: center;
    .head {
      width: 1.2rem;
      height: 1.2rem;
      margin: 0.25rem auto 0;
      overflow: hidden;
      border-radius: 50%;
      .el-image {
        width: 100%;
        height: 100%;
      }
    }
    .user {
      font-weight: bold;
      font-size: 0.2rem;
      margin: 0.4rem 0 0;
    }
    .role {
      color: #999;
      font-size: 0.16rem;
    }
  }
}
</style>